<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>报障历史页frame</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			html, body {
				height: 100%;
				background-color: #f8f8f8;
			}
			.m-t {
				margin-top: 13px;
			}
			.color-1 {
				color: #6e6e6e;
			}
			#main {
				padding: 10px 0;
			}
			#list-complaint-history {
				background-color: #fff;
			}
			#list-complaint-history > li {
				border-bottom: #f8f8f8 13px solid;
				padding: 0 5px;
			}
			#list-complaint-history > li:nth-last-child(1) {
				border-bottom: 0;
			}
			#list-complaint-history .pd {
				padding: 13px 10px;
			}
			#list-complaint-history .list-complaint-history-title-container {
				border-bottom: #e6e6e6 1px solid;
			}
			#list-complaint-history .btn-container-style {
				border-top: #e6e6e6 1px solid;
			}
			#list-complaint-history .btn-style {
				border-radius: 2.5px;
				width: 70px;
				height: 25px;
				line-height: 25px;
				color: #fff;
				font-size: 14px;
				text-align: center;
			}
			#list-complaint-history .btn-urgent {
				background-color: #FF0000;
			}
			#list-complaint-history .btn-canle-complaint {
				background-color: #FF9F00;
				margin-left: 10px;
			}
			#list-complaint-history .btn-evaluate {
				background-color: #FF9F00;
				margin-left: 10px;
			}
			.acms-jq-container.none, .acms-e-container.none, .acms-ed-container.none {
				display: none;
				color: #b4b4b4;
			}
			.list-complaint-history-time {
				color: #b4b4b4;
			}
		</style>
	</head>
	<body>
		<div id="list-complaint-history-item-temp" style="display: none;">
			<div class="list-complaint-history-title-container flex-container flex-between flex-center-v pd">
				<div class="list-complaint-history-title">
					--
				</div>
				<div class="list-complaint-history-result">
					--
				</div>
			</div>
			<div class="pd">
				<div class="flex-container flex-between flex-center-v">
					<div class="list-complaint-history-place color-1">
						--
					</div>
					<div class="list-complaint-history-time">
						--
					</div>
				</div>
				<div class="m-t color-1 list-complaint-history-processor-p">
					<span>处理员：</span><span class="list-complaint-history-processor"></span>
				</div>
			</div>
			<div class="none acms-jq-container btn-container-style pd flex-container flex-between flex-center-v">
				<div></div>
				<div class="flex-container flex-center-v">
					<div class="btn-style btn-urgent">
						加急
					</div>
					<div class="btn-style btn-canle-complaint">
						取消报障
					</div>
				</div>
			</div>
			<div class="none acms-e-container btn-container-style pd flex-container flex-between flex-center-v">
				<div></div>
				<div class="flex-container flex-center-v">
					<div class="btn-style btn-evaluate">
						评价
					</div>
				</div>
			</div>
			<!-- 已评价 -->
			<div class="none acms-ed-container btn-container-style pd flex-container flex-between flex-center-v">
				<div></div>
				<div>
					已评价
				</div>
			</div>
		</div>
		<div id="main">
			<ul id="list-complaint-history"></ul>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		//表示搜索那个页面的标记
		var mTag = null;
		//搜索内容
		var mSearchMsg;
		var mUserId;
		var mListView;
		//列表item的index
		var mItemIndex;
		//列表数据
		var mLVDatas;
		//是否加载更多
		var mIsLoadMore = false;
		//第几页
		var mPageNum = 1;
		//每页数据条数
		var mPageSize = 10;
		apiready = function() {
			initData();
			initView();
			requestList(mPageSize, mPageNum);
		};
		function initData() {
			mUserId = $api.getStorage(MyCom.key_userid);
			mSearchMsg = api.pageParam.searchMsg;
		}

		function initView() {
			mListView = document.getElementById('list-complaint-history');
			listenerScrollBottom();
			setStatusChangeListener();
		}

		/**
		 * 显示列表
		 * @param{Object} datas - 用户数据数组json
		 */
		function showListView(datas) {
			if (datas == null || datas.length < 1) {
				return;
			}
			var index = 0;
			var item = '';
			//判断是否是加载更多。是，mLVDatas添加数据。否，mLVDatas清空数据，mListView清空html
			if (mIsLoadMore) {
				for (index in datas) {
					mLVDatas.push(datas[index]);
				}
			} else {
				mListView.innerHTML = '';
				mLVDatas = null;
				mLVDatas = datas;
			}
			index = 0;
			//展示listview
			for (index in datas) {
				item = createLVItem(datas[index]);
				mListView.appendChild(item);
			}
			if (mIsLoadMore) {
				mIsLoadMore = false;
				hideLoadMoreView();
			} else {
				api.hideProgress();
			}
		}

		/**
		 * 创建列表的item
		 * @param {Object} data - 用户信息的object对象
		 */
		function createLVItem(data) {
			//状态： 1 待处理 2.已受理 3 .处理中  4.已处理 5.疑难单 6.报障关闭 7.已完成
			var status = data.status;
			var isTwo = data.two == 0 ? false : true;
			//加急状态
			var jStatus = data.urgent;
			//是否点击加急
			var isClick1 = false;
			//是否点击取消
			var isClick2 = false;
			//是否点击评价
			var isClick3 = false;
			var li = document.createElement('li');
			li.innerHTML = document.getElementById('list-complaint-history-item-temp').innerHTML;
			//报障情况
			var title = li.getElementsByClassName('list-complaint-history-title')[0];
			//报障结果
			var result = li.getElementsByClassName('list-complaint-history-result')[0];
			//报障地点
			var place = li.getElementsByClassName('list-complaint-history-place')[0];
			//报障时间
			var time = li.getElementsByClassName('list-complaint-history-time')[0];
			//故障分配人员
			var member = li.getElementsByClassName('list-complaint-history-processor')[0];
			//加急，取消
			var jqC = li.getElementsByClassName('acms-jq-container')[0];
			var j = li.getElementsByClassName('btn-urgent')[0];
			var q = li.getElementsByClassName('btn-canle-complaint')[0];
			//评价
			var eC = li.getElementsByClassName('acms-e-container')[0];
			var e = li.getElementsByClassName('btn-evaluate')[0];
			//已评价
			var edC = li.getElementsByClassName('acms-ed-container')[0];
			edC.style.color = '#b4b4b4';
			title.innerText = MyCom.dataFaultTolerant(data.title);
			place.innerText = MyCom.dataFaultTolerant(data.warn_location);
			time.innerText = MyCom.dataFaultTolerant(data.create_time);
			if (data.action_person == null) {
				member.innerText = '未分配';
			} else {
				member.innerText = MyCom.fomatName(data.action_person);
			}
			switch(parseInt(status)) {
				case 1:
					//待处理
					if (jStatus == 0) {//未加急
						jqC.className = 'acms-jq-container btn-container-style pd flex-container flex-between flex-center-v';
						j.onclick = function() {
							//加急
							isClick1 = true;
							console.log('加急');
						}
						q.onclick = function() {
							//取消
							isClick2 = true;
							console.log('取消');
						}
					} else {
						jqC.className = 'none acms-jq-container btn-container-style pd flex-container flex-between flex-center-v';
					}
					result.innerText = '待处理';
					result.style.color = '#ff0f2e';
					break;
				case 2:
					//已受理
					result.innerText = '已受理';
					result.style.color = '#ff8000';
					break;
				case 3:
					//处理中
					result.innerText = '处理中';
					result.style.color = '#ff8000';
					break;
				case 4:
					//已处理
					result.innerText = '已处理';
					result.style.color = '#ff8000';
					//划分已评价和未评价
					if (data.point == null) {
						eC.className = 'acms-e-container btn-container-style pd flex-container flex-between flex-center-v';
						e.onclick = function() {
							//评价
							isClick3 = true;
						}
					} else {
						edC.className = 'acms-ed-container btn-container-style pd flex-container flex-between flex-center-v';
					}
					break;
				case 5:
					result.innerText = '疑难单';
					result.style.color = '#ff8000';
					//划分已评价和未评价
					if (data.point == null) {
						eC.className = 'acms-e-container btn-container-style pd flex-container flex-between flex-center-v';
						e.onclick = function() {
							//评价
							isClick3 = true;
						}
					} else {
						edC.className = 'acms-ed-container btn-container-style pd flex-container flex-between flex-center-v';
					}
					break;
				case 6:
					//报障关闭
					result.innerText = '报障关闭';
					result.style.color = '#b4b4b4';
					break;
				case 7:
					//已完成
					result.innerText = '已完成';
					result.style.color = '#b4b4b4';
					//划分已评价和未评价
					if (data.point == null) {
						eC.className = 'acms-e-container btn-container-style pd flex-container flex-between flex-center-v';
						e.onclick = function() {
							//评价
							isClick3 = true;
						}
					} else {
						edC.className = 'acms-ed-container btn-container-style pd flex-container flex-between flex-center-v';
					}
					break;
			}
			li.onclick = function() {
				var clickIndex = 0;
				var lis = mListView.getElementsByTagName('li');
				var i = 0;
				for (; i < lis.length; i++) {
					if (this == lis[i]) {
						clickIndex = i;
						mItemIndex = clickIndex;
						break;
					}
				}
				if (isClick1) {//点击了加急
					isClick1 = false;
					requestUrgentCp(mLVDatas[clickIndex].id);
				} else if (isClick2) {//点击了取消
					isClick2 = false;
					requestCancelCp(mLVDatas[clickIndex].id);
				} else if (isClick3) {//点击了评价
					isClick3 = false;
					openEvPg(mLVDatas[clickIndex].id);
				} else {
					openDetailsW(mLVDatas[clickIndex].id);
				}
			}
			return li;
		}

		/**
		 * 替换原item
		 *
		 */
		function replaceItem(data) {
			var newItem = createLVItem(data);
			var oldItem = mListView.getElementsByTagName('li')[mItemIndex];
			mListView.replaceChild(newItem, oldItem);
		}

		/**
		 * 打开详情页
		 */
		function openDetailsW(cpid) {
			api.openWin({
				name : 'complaint_details',
				url : './complaint_details.html',
				pageParam : {
					'id' : cpid
				}
			});
		}

		/**
		 * 打开评价页面
		 */
		function openEvPg(cpid) {
			console.log('openEvPg--id=' + cpid);
			api.openWin({
				name : 'evaluate',
				url : './evaluate.html',
				pageParam : {
					'id' : cpid,
					'name' : api.winName
				}
			});
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		/**
		 * 加载更多失败处理
		 */
		function loadMoreFailure(msg) {
			msg = msg || '加载更多失败！'
			//还原页数（第几页）
			mPageNum--;
			mIsLoadMore = false;
			hideLoadMoreView();
			api.toast({
				msg : msg
			});
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				console.log();
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (mListView.offsetHeight >= api.frameHeight && !mIsLoadMore) {
					mIsLoadMore = true;
					showLoadMoreView();
					requestList(mPageSize, ++mPageNum)
				}
			});
		}

		/**
		 * 服务器请求：取消报障
		 * @param{Number} cpid - 故障id
		 */
		function requestCancelCp(cpid) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_CANCEL_CP;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('取消报障---ret=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						//转换item为报障关闭
						mLVDatas[mItemIndex].status = '6';
						replaceItem(mLVDatas[mItemIndex]);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器异常'
					});
				}
			});
		}

		/**
		 * 服务器请求：加急报障
		 * @param{Number} cpid - 故障id
		 */
		function requestUrgentCp(cpid) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_URGENT_CP;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('加急报障---ret=' + JSON.stringify(re));
					var code = re.code;
					if (code == 1) {
						//转换item为加急
						mLVDatas[mItemIndex].urgent = '1';
						replaceItem(mLVDatas[mItemIndex]);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器异常'
					});
				}
			});
		}

		/**
		 * 服务器请求：获取历史报障数据
		 * @param{int} pgS - 每页的数据条数
		 * @param{int} pgN - 页数
		 */
		function requestList(pgS, pgN) {
			var tag = 'requestList_more';
			if (!mIsLoadMore) {
				api.showProgress({
				});
				api.cancelAjax({
					tag : tag
				});
				tag = null;
			}
			var data = {
				values : {
					'userid' : mUserId,
					'page' : pgN,
					'rows' : pgS
				}
			};
			if (mSearchMsg != null) {
				data.values.serachcontent = mSearchMsg;
			}
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_HISTORY_CP;
			MyRequest.requestMethod(url, data, function(re) {
				console.log('获取历史报障数据---ret=' + JSON.stringify(re));
				if (re) {
					var code = re.code;
					if (code == 1) {
						showListView(re.list);
					} else {
						if (!mIsLoadMore) {
							api.hideProgress();
							api.toast({
								msg : re.msg
							});
						} else {
							//还原页数（第几页）
							loadMoreFailure('没有更多数据！');
						}
					}
				} else {
					if (!mIsLoadMore) {
						MyCom.errorTip(2);
					} else {
						loadMoreFailure();
					}
				}
			}, tag);
		}

		/**
		 * 設置“item数据状态改变”监听
		 */
		function setStatusChangeListener() {
			api.addEventListener({
				name : 'StatusChangeListener'
			}, function(ret, err) {
				if (ret) {
					var status = ret.value.status;
					var urgent = ret.value.urgent;
					var point = ret.value.point;
					if (status != null) {
						mLVDatas[mItemIndex].status = status;
					}
					if (urgent != null) {
						mLVDatas[mItemIndex].urgent = urgent;
					}
					if (point != null) {
						mLVDatas[mItemIndex].point = point;
					}
					replaceItem(mLVDatas[mItemIndex]);
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
